<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="相册图片" bgColor="#d86784" :backIcon="false" style="color: #ffffff;z-index: 2;"></Navbar>
		<view class="myphoto_top">
			<view class="album_tit">{{title}}</view>
			<view class="album_sm" @tap.stop="showIntro">操作说明</view>
		</view>
		<view class="selectcard">
			<view class="selectitem" @click="select"><text :class="current===1 ? 'text' : 'selecttext'">未购买相片</text></view>
			<view class="selectitem" @click="select"><text :class="current===0 ? 'text' : 'selecttext'">已购买相片</text></view>
		</view>
		<view v-if="current=== 0">
			<checkbox-group @change="sel_change" style=" width: 98vw;">
				<view  v-for="(item,index) in imgscollection" :key="index">
					<view class="first1">
						<image :src="item[0].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,0)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[0].downloadLock===true?true:false" :checked="item[0].ischk"
							class="gridib_chk" :value="JSON.stringify(item[0])"></checkbox>
					</view>
					<view class="first2" v-if="item.length>=2">
						<image :src="item[1].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,1)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[1].downloadLock===true?true:false" :checked="item[1].ischk"
							class="gridib_chk" :value="JSON.stringify(item[1])"></checkbox>
					</view>
					<view class="second1" v-if="item.length>=3">
						<image :src="item[2].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,2)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[2].downloadLock===true?true:false" :checked="item[2].ischk"
							class="gridib_chk" :value="JSON.stringify(item[2])"></checkbox>
					</view>
					<view class="second2" v-if="item.length>=4">
						<image :src="item[3].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,3)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[3].downloadLock===true?true:false" :checked="item[3].ischk"
							class="gridib_chk" :value="JSON.stringify(item[3])"></checkbox>
					</view>
					<view class="second3" v-if="item.length>=5">
						<image :src="item[4].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,4)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[4].downloadLock===true?true:false" :checked="item[4].ischk"
							class="gridib_chk" :value="JSON.stringify(item[4])"></checkbox>
					</view>
					<view class="third1" v-if="item.length>=6">
						<image :src="item[5].photoWatermarkUrl" mode="aspectFill" @tap.stop="previewImage(index,5)"
							:lazy-load="true"></image>
						<checkbox :disabled="item[5].downloadLock===true?true:false" :checked="item[5].ischk"
							class="gridib_chk" :value="JSON.stringify(item[5])"></checkbox>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view v-if="current===1">
			<checkbox-group @change="sel_change" style=" width: 98vw;">
				<view class="main" v-for="(item,index) in imgscollection1" :key="index">
					<view class="first1">
						<image :src="item[0].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,0)"
							:lazy-load="true"></image>
					</view>
					<view class="first2" v-if="item.length>=2">
						<image :src="item[1].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,1)"
							:lazy-load="true"></image>
					</view>
					<view class="second1" v-if="item.length>=3">
						<image :src="item[2].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,2)"
							:lazy-load="true"></image>
					</view>
					<view class="second2" v-if="item.length>=4">
						<image :src="item[3].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,3)"
							:lazy-load="true"></image>
					</view>
					<view class="second3" v-if="item.length>=5">
						<image :src="item[4].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,4)"
							:lazy-load="true"></image>
					</view>
					<view class="third1" v-if="item.length>=6">
						<image :src="item[5].photoMetuUrl" mode="aspectFill" @tap.stop="previewImage1(index,5)"
							:lazy-load="true"></image>
					</view>
				</view>
			</checkbox-group>
		</view>
		<button v-if="newchk_imgs.length>0 && current=== 0"   @click="toBalance" class="myphoto_bottom">去结算</button>
		<button v-else-if="chk_imgs.length>0 && current=== 0"   @click="toDownload" class="myphoto_bottom">下载我喜欢的照片</button>
		<!--弹出层 -->
		<uni-popup type="message" ref="oper_intro" background-color="#fff">
			<view class="operintro_msg">
				<view class="opermsg_tit">AI笑使用说明</view>
				<view class="opermsg_con">
					<ol>
						<li>1.点击图片可预览该图片精修效果，再次点击图片退出预览；</li>
						<li>2.选择需下载高清无水印的图片，系统会自动计算金额，付款后即可下载保存到本地相册；</li>
						<li>3.前三张高清照片可享受29.7元优惠价下载，第四张开始每张9.9元。</li>
					</ol>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import { 
		computed,
		reactive,
		ref,
		onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const num = ref()
	const num1 = ref()
	const num2 = ref()
	const oper_intro = ref(null)
	const sel_imgs = ref([])
	const sel_imgs1 = ref([])
	const chk_imgs = ref([])
	const index = ref()
	const albumId = ref()
	const albuminfo = reactive({})
	const current = ref(0)
	const hd_imgs = ref([])
	const imgslists = ref([])
	const imgslists1 = ref([])
	const imgscollection = ref([])
	const imgslistsLenght = ref()
	const imgscollection1 = ref([])
	const imgslistsLenght1 = ref()
	const height = ref()
	const showIntro = () => {
		oper_intro.value.open("center")
	}
	const select=()=>{
		console.log(current.value)
		if(current.value===0){
			current.value=1
		}else{
			current.value=0
		}
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value-57
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	const sel_change = (e) => {
		console.log(e.detail.value)
		sel_imgs.value = e.detail.value.map(item => JSON.parse(item))
		console.log(sel_imgs.value)
		sel_imgs1.value = sel_imgs.value.map(item => item.id)
		console.log(sel_imgs1.value)
	}
	//预览大图
	const previewImage = (index, index1) => {
		num1.value = Number(index) * 6 + Number(index1)
		uni.previewImage({
			urls: imgslists.value.map(item => item.photoWatermarkUrl),
			current: num1.value,
			indicator: "number",
			showmenu: false,
		})
	}
	const previewImage1 = (index, index1) => {
		num2.value = Number(index) * 6 + Number(index1)
		uni.previewImage({
			urls: imgslists1.value.map(item => item.photoMetuUrl),
			current: num2.value,
			indicator: "number",
		})
	}
	//去结算
	const toBalance = () => {
		console.log(chk_imgs.value)
		//console.log(2,albuminfo.value)
		getApp().globalData.newchk_imgs = newchk_imgs.value
		uni.request({
			url: getApp().globalData.baseUrl + "/album/settleaccount",
			method: "POST",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				shootAddressId: albuminfo.value.shootAddressId,
				photoIds: sel_imgs1.value,
				albumId: albuminfo.value.id
			},
			success: (res) => {
				console.log(1, res)
				uni.navigateTo({
					url: "/pages/balance/balance?amount=" + res.data.value.amount,
				})
				getApp().globalData.album = albuminfo.value
			}
		})
	}
	//下载高清图片
	const toDownload = () => {
		//获取高清图片地址
		uni.request({
			url: getApp().globalData.baseUrl + "/album/download",
			method: "POST",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				albumId: albuminfo.value.id
			},
			success: (res) => {
				console.log(res)
				hd_imgs.value = res.data.value
				console.log(hd_imgs.value)
				for (let i = 0; i < hd_imgs.value.length; i++) {
					console.log(hd_imgs.value[i].photoMetuUrl)
					uni.getImageInfo({
						src: hd_imgs.value[i].photoMetuUrl,
						success: function(image) {
							console.log(image.path);
							uni.showToast({
								title: "保存中",
								icon: "loading"
							})
							uni.saveImageToPhotosAlbum({
								filePath: image.path,
								success: function() {
									console.log('save success');
									uni.showToast({
										title: "保存成功！",
										mask: true
									})
								},
								fail: function(res) {
									console.log(res)
									console.log('save error');
									uni.showToast({
										title: "保存失败！",
										mask: true
									})
								}
							});
						}
					});
				}
			}
		})
	}
	onShow(()=>{
		// const now = new Date().getTime()
		// if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
		// 	uni.reLaunch({
		// 		url: "/pages/login/login"
		// 	})
		// }
		getApp().globalData.album = ""
		console.log(getApp().globalData.album)
	})
	onLoad((opts) => {
		console.log(opts)
		num.value = Number(opts.index) * 3 + Number(opts.index1)
		console.log(num.value)
		//获取照片列表数据
		uni.request({
			url: getApp().globalData.baseUrl + "/album/list",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				albumId: null,
				clientNo: JSON.parse(uni.getStorageSync("user_info")).client_no,
				photographerId: null,
				shootName: null,
				shootAddressId: null,
				albumName: null
			},
			method: "POST",
			success: (res) => {
				albumId.value = res.data.value[num.value].id
				console.log(1,albumId.value)
				console.log(2,res.data.value[num.value])
				//getApp().globalData.album=res.data.value[opts.index]
				title.value = res.data.value[num.value].albumName
				albuminfo.value = res.data.value[num.value]
				imgslists.value = res.data.value[num.value].smilePhotoDTOS
				imgslistsLenght.value = imgslists.value.length
				for (let i = 0; i < Math.ceil(imgslistsLenght.value / 6); i++) {
					//console.log(imgslists.value.slice(i + i * 5, i + i * 5 + 6))
					imgscollection.value.push(imgslists.value.slice(i + i * 5, i + i * 5 + 6))
					//console.log(imgscollection.value)
				}
				chk_imgs.value = imgslists.value.filter(op => op.downloadLock === true).map(item =>
					item)
				sel_imgs.value = chk_imgs.value
				uni.request({
					url: getApp().globalData.baseUrl + "/album/loadedalbum",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: {
						albumId: albumId.value,
						clientNo: JSON.parse(uni.getStorageSync("user_info")).client_no,
						photographerId: null,
						shootName: null,
						shootAddressId: null,
						albumName: null
					},
					method: "POST",
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							imgslists1.value = res.data.value.smilePhotoDTOS
							imgslistsLenght1.value = imgslists1.value.length
							for (let i = 0; i < Math.ceil(imgslistsLenght1.value /
									6); i++) {
								console.log(imgslists1.value.slice(i + i * 5, i + i * 5 +
									6))
								imgscollection1.value.push(imgslists1.value.slice(i + i *
									5, i + i * 5 + 6))
								console.log(imgscollection1.value)
							}
						}
						console.log(3,imgscollection1.value)
						console.log(4,imgscollection.value)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			fail: (err) => {
				console.log(err)
			}
		})
	})
	onMounted(()=>{
		getColumnHeight()
	})
	const newchk_imgs = computed(() => {
		//let tmparr=[...new Set(sel_imgs.value.filter(f=> !chk_imgs.value.includes(f)))]
		return sel_imgs.value.filter(f => !chk_imgs.value.includes(f))
	
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		padding-bottom: 57px;
		//background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.myphoto_top {
		width: 100vw;
		display: flex;
		height: 40px;
		line-height: 40px;
		justify-content: space-between;
		border-bottom: 1px solid #e77c90;
		z-index: 1;
		position: relative;
		background-color: #ffffff;
	}
	.album_tit {
		background: url("http://zzqjt.oss-cn-hangzhou.aliyuncs.com/templates/client/res/54a7fabeab254b7391ee9bf06fcf5598-line_bg.png") no-repeat 18rpx center;
		padding-left: 42rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.album_sm {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	.selectcard{
		width: 100vw;
		height: 100rpx;
		display: flex;
		.selectitem{
			text-align: center;
			line-height: 100rpx;
			width: 50%;
			height: 100rpx;
			.text{
				color: #000000;
			}
			.selecttext{
				border-bottom: 10rpx solid #d95e7d;
				padding-bottom: 20rpx;
				color: #d95e7d;
			}
		}
	}
	.first1 {
		margin-top: 10rpx;
		width: 49%;
		height: 18vh;
		float: left;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.first2 {
		margin-top: 10rpx;
		width: 49%;
		height: 18vh;
		float: right;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.second1 {
		margin-top: 10rpx;
		width: 69%;
		height: 25vh;
		float: left;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.second2 {
		margin-top: 10rpx;
		width: 29%;
		height: 12.1vh;
		float: right;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.second3 {
		margin-top: 10rpx;
		width: 29%;
		height: 12.1vh;
		float: right;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.third1 {
		margin-top: 10rpx;
		width: 100%;
		height: 40vh;
		float: left;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.gridib_chk {
		position: absolute;
		right: 4rpx;
		top: 14rpx;
		color: #eee;
		transform: scale(1.5);
	}
	.operintro_msg {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 16rpx;
		line-height: 50rpx;
	}
	
	.uni-common-mt {
		position: sticky !important;
		top: 0 !important;
		width: 100% !important;
		background-color: #ffffff !important;
		z-index: 1 !important;
	}
	
	.segmented-control--text {
		width: 100%;
		height: 72rpx;
	}
	.myphoto_bottom{
		width: 100%;
		height: 55px;
		line-height: 55px;
		background-color: #d95e7d;
		position: fixed;
		bottom: 0;
		color: #ffffff;
	}
</style>